<template>
  <div class="car-rental">
    <scroll ref="verticalScroll" :listenScroll="true" :probeType="3">
      <div class="sort">
        <span>综合排序</span>
        <span>价格↓</span>
        <span>价格↑</span>
      </div>
      <div class="carList" v-for="n in 20" :key="n">
        <div class="carImg">
          <img :src='carImg' alt="">
        </div>
        <div class="carDescribe">
          <div class="carDescribeTop">
            <h4>劳斯莱斯幻影</h4>
            <span>三箱|5.5自动|乘坐5人</span>
          </div>
          <div class="carDescribeBottom">
            <h4>¥5000/日均</h4>
            <span @click="showDialog">
              注意事项
              <x-icon type="ios-information" size="16"></x-icon>
            </span>
          </div>
        </div>
      </div>
    </scroll>

    <div>
      <x-dialog v-model="showDialogStyle" hide-on-blur mask-z-index="2000" :dialog-style="{width: '100%', 'height': '100px', 'background-color': 'transparent'}">
        <span style="font-size:30px; color: #fff">这里是注意事项</span>
        <br>
        <br>
        <x-icon type="ios-close-outline" style="fill:#fff;" @click="showDialogStyle=false"></x-icon>
      </x-dialog>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import scroll from '@/components/scroll/scroll'
import carImg from '@/assets/img/car.png'
import { XDialog } from 'vux'

export default {
  data () {
    return {
      carImg: carImg,
      showDialogStyle: false
    }
  },
  components: {
    scroll,
    XDialog
  },
  mounted () {
    this.$refs.verticalScroll.$el.style.height = (window.innerHeight - 110) + 'px'
  },
  methods: {
    showDialog () {
      this.showDialogStyle = true
    },
    scrollToTop () {
      this.$refs.verticalScroll.scrollTo(0, 0, 200)
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
  .sort {
    display flex
    justify-content space-around
    padding 20px 0
    margin-bottom 10px
    background #fff
    box-shadow 0px 0px 15px grey
    font-size $font-size-title
  }
  .carList{
    display flex
    justify-content space-around
    align-items center
    background #fff
    padding 20px 10px
    margin-bottom 10px
    .carImg{
      img {
        width 120px
      }
    }
    .carDescribe {
      width 60%
      .carDescribeTop{
        h4 {
          font-size $font-size-title
          color $color-text-1
        }
        span {
          font-size $font-size-small
          color $color-text-2
        }
      }
      .carDescribeBottom{
        display flex
        justify-content space-between
        align-items flex-end
        border-top 1px solid rgba(0,0,0, 0.05) 
        margin-top 5px
        padding-top 5px
        h4{
          font-size $font-size-large
          color $color-theme
        }
        span {
          font-size $font-size-small
          color $color-text-2
          display flex
          align-items center
        }
      }
    }
  }
  .vux-x-icon {
    fill $color-theme
  }
</style>
